<template>
  <div class="app-container">
    <swiper :options="swiperOption1" ref="mySwiper1" id="mySwiper1">
      <swiper-slide
        class="swiper_slide_item"
        v-for="(item, index) in 6"
        :key="item"
      >
        <img
          :src="
            require(`../../assets/images/home/BottomBanner/1-0${index + 1}.jpg`)
          "
          alt="swiperImg"
        />
      </swiper-slide>
    </swiper>
    <swiper :options="swiperOption2" ref="mySwiper2" id="mySwiper2">
      <swiper-slide
        class="swiper_slide_item"
        v-for="(item, index) in 5"
        :key="item"
      >
        <img
          :src="
            require(`../../assets/images/home/BottomBanner/2-0${index + 1}.jpg`)
          "
          alt="swiperImg"
        />
      </swiper-slide>
    </swiper>
    <swiper :options="swiperOption3" ref="mySwiper3" id="mySwiper3">
      <swiper-slide
        class="swiper_slide_item"
        v-for="(item, index) in 6"
        :key="item"
      >
        <img
          :src="
            require(`../../assets/images/home/BottomBanner/3-0${index + 1}.jpg`)
          "
          alt="swiperImg"
        />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeBottomBanner",
  data() {
    return {
      CommonSwiperOptions: {
        loop: true, // 循环播放
        speed: 5500, // 切换动画的切换速度
        slidesPerView: "auto",
        spaceBetween: 7,
        loopedSlides: 9,
        allowTouchMove: false,
        autoplay: {
          delay: 0, // 幻灯片停留时间
          stoponlastslide: false, // 幻灯片切换时，停止幻灯片的播放
          disableOnInteraction: true, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
      },
      swiperOption1: {},
      swiperOption2: {},
      swiperOption3: {},
    };
  },
  created() {
    this.swiperOption1 = { ...this.CommonSwiperOptions };
    this.swiperOption2 = {
      ...this.CommonSwiperOptions,
      // 设置为4防止界面切换过渡速度过快
      initialSlide: 4,
      // 设置反方向
      autoplay: {
        delay: 0, // 幻灯片停留时间
        stoponlastslide: false,
        disableOnInteraction: false,
        reverseDirection: true,
      },
    };
    this.swiperOption3 = {
      ...this.CommonSwiperOptions,
      // 与swiper1设置不同起点，不同步
      slidesOffsetBefore: 200,
    };
  },
};
</script>

<style lang="less" scoped>
#mySwiper1,
#mySwiper2,
#mySwiper3 {
  margin: 6px auto;
}
/deep/ .swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper_slide_item {
  width: 350px;
  height: 200px;
  // 图片居中铺满这个容器
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  img:hover {
    transition: all 0.6s;
    transform: scale(1.1);
  }
}
</style>
